import React, { useState, useEffect } from 'react';
import { NavBar, Space, Input, AutoCenter, Button, Toast } from 'antd-mobile';
import { useHistory, useLocation } from 'umi';

import './index.scss';
import Draggable from 'react-draggable';
import { nanoid } from 'nanoid';
import img1 from '@/static/images/img1.jpg';
import img2 from '@/static/images/img2.jpg';
import img3 from '@/static/images/img3.jpg';
import img4 from '@/static/images/img4.jpg';
import img5 from '@/static/images/img5.jpg';

export default function App() {
  const location = useLocation();
  const state = location.query;
  const [wish, setWish] = useState('');
  const [wishlist, setList] = useState([]);
  const [wishstyle, setStyle] = useState('');
  const [vals, setval] = useState();

  const [disabled, setDisabled] = useState(true);
  // 拖拽记录
  const eventLogger = (e, data) => {
    console.log(`data`, data);
    wishlist.forEach(function (value, key) {
      if (value.id == vals) {
        // console.log(`value`, value);
        // console.log(`value`, vals);
        let list = {
          id: value.id,
          value: value.value,
          color: value.color,
          x: data.lastX,
          y: data.lastY,
        };
        wishlist.splice(key, 1, list);
        localStorage.setItem('xinyuan', JSON.stringify(wishlist));
        setList([...wishlist]);
      }
    });
  };

  const TextDecoder = (val, index) => {
    console.log(`val`, val);
    setval(val);
  };

  const left = (
    <div style={{ fontSize: 16 }}>
      <Space style={{ '--gap': '16px' }}>
        <p>昵称:{state.name}</p>
      </Space>
    </div>
  );

  // 提交事件
  function useVerifyPhoneNum() {
    let list = {
      id: nanoid(),
      value: wish,
      color: wishstyle,
      x: 0,
      y: 0,
    };
    wishlist.push(list);
    localStorage.setItem('xinyuan', JSON.stringify(wishlist));
    console.log(`wishlist`, wishlist);
    setList([...wishlist]);
    setWish('');
    setStyle('');
  }

  // 删除事件
  function usedelete(val) {
    console.log(`123`, 123);
    // wishlist.splice(val, 1);
    wishlist.forEach(function (value, key) {
      if (value.id == val) {
        console.log('id', value.id);
        console.log('val', val);
        wishlist.splice(key, 1);
        console.log(`key`, key);
        localStorage.setItem('xinyuan', JSON.stringify(wishlist));
        setList([...wishlist]);
      }
    });
    console.log(`wishlist`, wishlist);
  }
  // 修改事件
  function upValue(val) {
    console.log(`val`, val);
  }
  useEffect(() => {
    console.log(`数据`, 1);
    if (localStorage.getItem('xinyuan') != null) {
      let data = JSON.parse(localStorage.getItem('xinyuan'));
      setList(data);
    }
  }, []);

  useEffect(() => {
    // wishlist=data;
    console.log(wish);
    console.log(wishstyle);
    if ((wish.length > 0) & (wishstyle.length > 0)) {
      setDisabled(false);
    } else {
      setDisabled(true);
    }
  }, [wish, wishstyle]);
  return (
    <div>
      <NavBar left={left} backArrow={false}>
        许愿墙
      </NavBar>
      <AutoCenter>
        <Input
          placeholder="请输入想实现的愿望"
          value={wish}
          onChange={(val) => {
            setWish(val);
          }}
          clearable
        />
        <div className="but">
          <img
            className={wishstyle == img1 ? 'oncli' : ''}
            src={img1}
            onClick={() => {
              setStyle(img1);
            }}
          />
          <img
            className={wishstyle == img2 ? 'oncli' : ''}
            src={img2}
            onClick={() => {
              setStyle(img2);
            }}
          />
          <img
            className={wishstyle == img3 ? 'oncli' : ''}
            src={img3}
            onClick={() => {
              setStyle(img3);
            }}
          />
          <img
            className={wishstyle == img4 ? 'oncli' : ''}
            src={img4}
            onClick={() => {
              setStyle(img4);
            }}
          />
          <img
            className={wishstyle == img5 ? 'oncli' : ''}
            src={img5}
            onClick={() => {
              setStyle(img5);
            }}
          />
        </div>
        <Button
          onClick={useVerifyPhoneNum}
          disabled={disabled}
          block
          type="submit"
          color="primary"
          size="large"
        >
          提交
        </Button>
      </AutoCenter>
      {/* 拖拽 */}
      <div className="list">
        {wishlist?.map((item, index) => {
          // console.log(`item`, item);
          return (
            <Draggable
              key={item.id}
              handle=".box"
              defaultPosition={{ x: item.x, y: item.y }}
              onStop={eventLogger}
              onStart={(val) => {
                TextDecoder(item.id);
              }}
            >
              <div>
                <button
                  className="butto"
                  onClick={(val) => {
                    usedelete(item.id);
                  }}
                >
                  x
                </button>
                <div className="inpt">
                  {/* <Input
                                        placeholder="请输入内容"
                                        value={item.value}
                                        readOnly
                                        onClick={(val) => {
                                            upValue(val);
                                        }}
                                    /> */}
                  <p>{item.value}</p>
                </div>
                <div className="box" style={{ backgroundColor: item.color }}>
                  <img src={item.color} />
                </div>
              </div>
            </Draggable>
          );
        })}
      </div>
    </div>
  );
}
